<template>
  <div id="app">
      <header>头部</header>
      <div class="con">
        <div :up="up" :down="down">
          <el-list v-for="(item,index) in list" 
              :key="index"
              :url="item.url"
              :title="item.title"
              :price="item.price"
          ></el-list>
        </div>
      </div>
      <footer>底部</footer>
  </div>
</template>

<script>
import elList from './components/elList'
import BScroll from 'better-scroll'
export default {
  name: 'App',
  components:{
    elList
  },
  data(){
    return {
      pagenum:1,
      limit:10,
      list:[],
      scroll:'',
      up:'上拉加载',
      down:"下拉刷新",
      total:0
    }
  },
  created(){
    this.getData();
  },
  methods:{
    getData(){
      this.$http.get('/api/list',{params:{pagenum:this.pagenum,limit:this.limit}}).then((res) =>{
        if(res.data.code === 1){
          this.list = this.list.concat(res.data.data),
          this.total = res.data.total;
        }
      })
    }
  },
  mounted(){
    let that = this;
    //视图全部渲染完毕
    this.$nextTick(() => {
      console.log("=====")
      this.scroll = new BScroll('.con',{
        probeType:2,
        click:true
      })
      
      this.scroll.on('scroll',function(){
        if(this.y<this.maxScrollY - 44){
            that.up = "释放加载更多";
        }else if(this.y<this.maxScrollY - 22){
            that.up = "上拉加载更多";
        }
      })

      this.scroll.on('touchEnd',function(){
        if(that.up === "释放加载更多"){
          if(that.pagenum <that.total){
            that.pagenum++;
            that.getData();
            that.up = "加载更多"
          }else{
            that.up = "加载完毕"
          }
        }
      })
    })
 },
 watch:{
   list(){
     this.$nextTick(() => {
       this.scroll.refresh()
     })
   }
 }
}
</script>

<style lang="scss">
*{
  margin:0;
  padding:0;
  box-sizing: border-box
}

html,body{
  width:100%;
  height: 100%;
  overflow: hidden;
}
#app{
  width:100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.con{
  width:100%;
  flex:1;
  overflow: hidden;
}

.con>div{
  position: relative;
  &:before{
    content:attr(up);
    width:100%;
    height: 44px;
    background: pink;
    position: absolute;
    bottom:-44px;
    left:0;
  }
  &:after{
    content:attr(down);
    width:100%;
    height: 44px;
    background: pink;
    position: absolute;
    top:-44px;
    left:0;
  }
}

header,footer{
  width:100%;
  height:40px;
  background: #eee;
}
</style>
